<style scoped>
.chart {
  width: 100%;
  float: left;
}


/*.chart div {
      height: 400px;
      float: left;
  }*/

.Col {
  padding: 30px 20px;
}

.blist {
  /*background-color: #d1e4e8;*/
  /*height: 200px;*/
  cursor: pointer;
  color: #6eceac;
}

.userlist {
  padding-left: 30%;
  float: right;
  color: #6eceac;
}

.ecard {
  height: 300px;
  margin-bottom: 10px;
  /*margin-right: 10px;*/
}

.hcard {
  height: 610px;
  margin-left: 20px;
}

.p-img {
  width: 100%;
  /*height: 60px;*/
  line-height: 60px;
  float: right;
  margin-top: -50px;
}

.p-img img {
  border-radius: 20px;
  /*margin: 10px 0px 10px 10px;*/
  width: 20px;
  height: 20px;
  float: right;
}
</style>

<template>
<div class="layout-content-body">
  <Row>
    <Col :span="12">
    <Card class="ecard">
      <p slot="title">
        {{userInfo.Title}}
      </p>
      <span class="p-img">
                            <img :src="imgUrl">
                        </span>
      <ul>
        <li>姓名:
          <span class="userlist">{{userInfo.Title}}</span>
        </li>
        <li>账号:
          <span class="userlist">{{userInfo.Name}}</span>
        </li>
        <li>角色:
          <span class="userlist">{{state.role.Name}}</span>
        </li>
        <li>单位:
          <span class="userlist">{{state.org.Name}}</span>
        </li>
        <li>部门:
          <span class="userlist">{{state.dept.Name}}</span>
        </li>
        <!-- <li>职业:
            <span class="userlist">{{userInfo.Expert}}</span>
          </li> -->
        <li>岗位:
          <span class="userlist">{{userInfo.Job}}</span>
        </li>
        <li>电话:
          <span class="userlist">{{userInfo.Phone}}</span>
        </li>
        <li>邮件:
          <span class="userlist">{{userInfo.Email}}</span>
        </li>
        <li>上次活动时间:
          <span class="userlist">{{userInfo.Logintime}}</span>
        </li>
        <li>上次活动ip:
          <span class="userlist">{{userInfo.Loginip}}</span>
        </li>
      </ul>
    </Card>
    <Card class="ecard">
      <p slot="title">
        公告
      </p>
      <ul>
        <li v-for="item in bulletins" :key="item.Id" @click="show(item)" class="blist">
          <Icon type="information-circled" style="color: red"></Icon>
          &nbsp;&nbsp;&nbsp;&nbsp;{{item.Title}} {{item.Utime.slice(0,10)}}
        </li>
      </ul>
    </Card>
    </Col>
    <Col :span="12">
    <!-- <Card class="hcard">
        <p slot="title">
          观看历史
        </p>
        <Timeline class="hisLine" pending>
          <Timeline-item v-for="item in getHistorys" :key="item.Id">
            <p class="time">{{item.Ctime.slice(0,10)}}</p>
            <p class="content">{{item.VideoName}}&nbsp&nbsp观看时长:{{item.LookLong}}秒</p>
          </Timeline-item>
          <Timeline-item>
            <router-link to="/history">查看更多</router-link>
          </Timeline-item>
        </Timeline> -->
    </Card>
    </Col>
  </Row>
  <!-- <Row style="background:#eee;padding:20px;" v-if="role.Type<2">
      <Col :span="12">
      <Card>
        <chart :options="liveOptions"></chart>
      </Card>
      </Col>
      <Col :span="12">
      <Card>
        <chart :options="videoOptions"></chart>
      </Card>
      </Col>

    </Row> -->
  <Modal title="公告" width="900" style=" height:400px;" v-model="showModel">
    <div v-html="bulletin.Content"></div>
  </Modal>

</div>
</template>

<script>
import echarts from 'echarts'
import {
  CPT_ROOT,
  V_ROOT
} from '@/api/config'
import api from '@/api'
import {
  mapActions,
  mapState,
  mapMutations
} from 'vuex'
export default {
  data() {
    return {
      value: 0,
      bulletins: [],
      showModel: false,
      bulletin: {},
    }
  },
  computed: {
    // ...mapState(['isLogin', 'org', 'userInfo', 'dept', 'role']),
    userInfo() {
      return this.$store.state.app.userInfo
    },
    state() {
      return this.$store.state.app
    },
    imgUrl() {
      if (!this.userInfo.Photo) {
        return "/static/default.jpg"
      } else {
        return V_ROOT + '/' + this.userInfo.Photo
      }

    }
  },
  methods: {
    // ...mapMutations(['SET_MSG']),
    // welcom(){
    //   if (this.isLogin) {
    //     this.$Notice.success({
    //       top: 100,
    //       title: '欢迎' + this.userInfo.Title + '登陆系统',
    //       desc: '祝您有美好的一天！'
    //     });
    //   }
    // },

    getBulletin() {
      this.spinShow = true
      this.$api.getMyBulletin().then(res => {
        if (!res.error) {
          this.bulletins = res.Data
        } else {
          this.$Message.error(res.message)
        }
      })
      setTimeout(() => {
        this.spinShow = false;
      }, 300);
    },

    show(data) {
      this.bulletin = data
      this.showModel = true
    }
  },
  mounted: function() {

    this.getBulletin()

    // setTimeout(() => {
    //   this.welcom()
    // }, 1000);

  }

}
</script>
